<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="温湿度详情" :isHome="true" :isBack="true"></navigationTop>
		<!-- 温湿度详情 -->
		<view class="main-bg" >
			<!-- 主要内容部分 -->
			<view class="main-contain">
				<!-- 主体白色卡片-开始 -->
				<view class="main-card">
					<!-- 头部圆形图标 -->
					<view class="circle">
						<view :class="['wsd-icon','is-dot', optionData.alarmLevel=='0'?'':'alarm-dot'+optionData.alarmLevel]" :style="{
							'background-image':'url('+$store.state.baseImg+'/icon/wsd.png)'
						}"></view>
					</view>
					<!-- 头部标题-开始 -->
					<view class="top-content">
						<view class="mess">
							<u-row align='top' class="top-row">
								<u-col :span="3" class="info-label" text-align="center">名称</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceName}}</u-col>
							</u-row>
							<u-row align='top' class="top-row"> 
								<u-col :span="3" class="info-label" text-align="center">类型</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceType}}</u-col>
							</u-row>
						</view>
					</view>
					<!-- 头部标题-结束 -->
					<!-- 中部状态标识内容-开始 -->
					<view class="status-content">
						<text :prop="baseImg" :change:prop="echarts.updateBaseImg">当前状态</text>
						<text :class="'text-level'+infoData.deviceStatus">{{deviceStatus(infoData.deviceStatus)}}</text>
					</view>
					<!-- 中部状态标识内容-结束 -->
					<!-- echarts模块开始 -->
					<template v-if="echartsLoading">
						<view class="echarts-loading">
							<u-loading mode="flower" size="40"></u-loading>
							<view>
								<text class="loading-text">正在生成</text>
							</view>
						</view>
					</template>
					<view class="echarts-content" :prop="itemData" :change:prop="echarts.updateEcharts" >
						<view class="echarts" :id="'echarts'+index" v-for="(item,index) in itemData" :key="index"></view>
					</view>
					<!-- echarts模块结束 -->
				</view>
			</view>
			<!-- tabs组件 -->
			<view class="tabs-content">
				<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
			</view>
			<!-- tabs组件 -->
			<!-- 轮播盒子 -->
			<view style="height: 560rpx;">
				<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
			</view>
			<!-- 轮播盒子 -->
		</view>
	</view>
</template>

<script>
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{navTab,AlarmSwiper,navigationTop},
		data(){
			return{
				echartsLoading:true,
				infoData:{},
				optionData:{},
				navCurrent:'0', //tab 栏的index
				refreshSwiper:true, //是否重置swiper
				swiperGroup:{}, //swiper组
				swiperData:[], //展示的swiper数组
				tabList:alarmTabs(),
				itemData:[],
				baseImg:""
			}
		},
		onLoad(options) {
			this.optionData = {
				...options
			}
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods:{
			// 改变echarts是否生成 切换loading图标
			changeEchartLoading(val){
				this.echartsLoading = val
			},
			changeNav(val){
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			handleTab_Swiper(res){
				// 给tab栏赋值
				this.tabList.forEach((item)=>{
					res.data.alarmCount.forEach((its)=>{
						if(item.alarmLevel == its.alarmLevel){
							item['count'] = its.r1
							// item['count'] = 5
						}
					})
				})
				const swiperData = res.data.alarmList;
				const group = {
					"0":[],
					"1":[],
					"2":[],
					"3":[],
					"4":[]
				}
				const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
				this.swiperGroup = swipers;
				this.swiperData = this.swiperGroup[this.navCurrent];
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data
				}).then((res)=>{
					uni.hideLoading()
					this.infoData = {
						...res.data.deviceDetails
					}
					this.itemData.push({
						title1: "温度",
						val1: this.infoData.temperature +"℃",
						value1: this.infoData.temperature,
						title2: "湿度",
						val2: this.infoData.humidity+"%RH",
						value2:this.infoData.humidity
					})
					// 给tab栏赋值
					this.handleTab_Swiper(res)
				}).catch((err)=>{
					uni.hideLoading()
				})
			}
		},
		mounted() {
			this.baseImg = this.$store.state.baseImg;
			this.getData(this.optionData);
		}
	}
</script>
<script module="echarts" lang="renderjs">
	import {rpxToPx} from "../../common/utils/index.js";
	var center1= ["20%","55%"]; //圆1的位置
	var center2 = ["80%","55%"]; //圆2的位置
	var colorSet = { //颜色配置
			dangerColor:"#ff3355",
			nomalColor:"#212c67",
			outColor1:"#ff3355",
	    color: '#8594b8'
	};
	// 内环和外环的圆大小
	var radius = ['95%','75%'];
	const windowWidth = uni.getSystemInfoSync().windowWidth;
	window['echartsObj'] = {};
	export default{
		data(){
			return{
				options: {
					backgroundColor: 'rgba(0,0,0,0)',
					series: [{
							name: "外部进度条1",
							type: "gauge",
							radius: radius[0],
							center: center1,
							splitNumber: 10,
							axisLine: {
								lineStyle: {
									color: [
										[90 / 220, colorSet.outColor1],
										[1, "#dfe0e6"]
									],
									width: rpxToPx(8,windowWidth)
								}
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							itemStyle: {
								show: false,
							},
							detail: {
								formatter: function(value) {
									if (value !== 0) {
										// var num = Math.round(value);
										return parseFloat(value).toFixed(2) + ' ℃';
									} else {
										return 0;
									}
								},
								offsetCenter: [0, '10%'],
								textStyle: {
									padding: [0, 0, 0, 0],
									fontSize: rpxToPx(25,windowWidth),
									fontWeight: '800',
									color: colorSet.outColor1
								}
							},
							title: { //标题
								show: true,
								offsetCenter: [0, '46%'], // x, y，单位px
								textStyle: {
									color: "#212c67",
									fontSize: rpxToPx(21,windowWidth), //表盘上的标题文字大小
									fontWeight: 800,
									// fontFamily: 'PingFangSC'
								}
							},
							data: [{
								name: "A相电压",
								value: 90,
							}],
							pointer: {
								show: false,
								length: '75%',
								radius: '20%',
								width: 5, //指针粗细
							},
							animationDuration: 4000,
						},
						{
							name: '内部刻度1',
							type: 'gauge',
							center: center1,
							radius: radius[1],
							min: 0, //最小刻度
							max: 220, //最大刻度
							splitNumber: 11, //刻度数量
							startAngle: 225,
							endAngle: -45,
							axisLine: {
								show: false,
								lineStyle: {
									width: rpxToPx(4,windowWidth),
									color: [
										[1, 'rgba(0,0,0,0)']
									]
								}
							}, //仪表盘轴线
							axisLabel: {
								show: false,
								color: '#4d5bd1',
								distance: rpxToPx(10,windowWidth),
								formatter: function(v) {
									return v + ''
								}
							}, //刻度标签。
							axisTick: {
								show: true,
								splitNumber: 5,
								lineStyle: {
									color: colorSet.color, //用颜色渐变函数不起作用
									width: rpxToPx(2,windowWidth),
								},
								length: rpxToPx(-6,windowWidth)
							}, //刻度样式
							splitLine: {
								show: true,
								length: rpxToPx(-11,windowWidth),
								lineStyle: {
									width: rpxToPx(4,windowWidth),
									color: colorSet.color, //用颜色渐变函数不起作用
								}
							}, //分隔线样式
							detail: {
								show: false
							},
							pointer: {
								show: false
							}
						},
						{
								name: "外部进度条2",
								type: "gauge",
								radius: radius[0],
								center: center2,
								splitNumber: 10,
								axisLine: {
									lineStyle: {
										color: [
											[90 / 220, colorSet.outColor1],
											[1, "#dfe0e6"]
										],
										width: rpxToPx(8,windowWidth)
									}
								},
								axisLabel: {
									show: false,
								},
								axisTick: {
									show: false,
						
								},
								splitLine: {
									show: false,
								},
								itemStyle: {
									show: false,
								},
								detail: {
									formatter: function(value) {
										if (value !== 0) {
											// var num = Math.round(value);
											return parseFloat(value).toFixed(2) + ' %RH';
										} else {
											return 0;
										}
									},
									offsetCenter: [0, '10%'],
									textStyle: {
										padding: [0, 0, 0, 0],
										fontSize: rpxToPx(24,windowWidth),
										fontWeight: '800',
										color: colorSet.outColor1
									}
								},
								title: { //标题
									show: true,
									offsetCenter: [0, '46%'], // x, y，单位px
									textStyle: {
										color: "#212c67",
										fontSize: rpxToPx(21,windowWidth), //表盘上的标题文字大小
										fontWeight: 800,
										// fontFamily: 'PingFangSC'
									}
								},
								data: [{
									name: "A相电流",
									value: 90,
								}],
								pointer: {
									show: false,
									length: '75%',
									radius: '20%',
									width: rpxToPx(10,windowWidth), //指针粗细
								},
								animationDuration: 4000,
							},
							{
								name: '内部刻度2',
								type: 'gauge',
								center: center2,
								radius: radius[1],
								min: 0, //最小刻度
								max: 220, //最大刻度
								splitNumber: 11, //刻度数量
								startAngle: 225,
								endAngle: -45,
								axisLine: {
									show: false,
									lineStyle: {
										width: rpxToPx(2,windowWidth),
										color: [
											[1, 'rgba(0,0,0,0)']
										]
									}
								}, //仪表盘轴线
								axisLabel: {
									show: false,
									color: '#4d5bd1',
									distance: rpxToPx(8,windowWidth),
									formatter: function(v) {
										return v + ''
									}
								}, //刻度标签。
								axisTick: {
									show: true,
									splitNumber: 5,
									lineStyle: {
										color: colorSet.color, //用颜色渐变函数不起作用
										width: rpxToPx(2,windowWidth),
									},
									length: rpxToPx(-6,windowWidth)
								}, //刻度样式
								splitLine: {
									show: true,
									length: rpxToPx(-11,windowWidth),
									lineStyle: {
										width: rpxToPx(4,windowWidth),
										color: colorSet.color, //用颜色渐变函数不起作用
									}
								}, //分隔线样式
								detail: {
									show: false
								},
								pointer: {
									show: false
								}
							}
					]
				}
			}
		},
		methods:{
			updateBack(newValue, oldValue, ownerInstance, instance){
			},
			updateBaseImg(newValue, oldValue, ownerInstance, instance){
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				
				this.appendScript(newValue,ownerInstance)
			},
			// 工具函数用于修改options内数据 接收obj:进入修改对象,value: 数值number,title : 底部标题string, maxData: 刻度盘最大值number
			controlFun(obj,value,title,maxData){
				obj.max = maxData
				obj.data = [{name:title,value:value}]
				obj.axisLine.lineStyle.color[0] = [(value / maxData).toFixed(2),colorSet.nomalColor]
				obj.detail.textStyle.color = colorSet.nomalColor
				if(value > (maxData)){
					obj.axisLine.lineStyle.color[0][1] = colorSet.dangerColor
					obj.detail.textStyle.color = colorSet.dangerColor
				}
			},
			initEcharts(val) {
				val.forEach((item, index) => {
					if (!window.echartsObj['echarts' + index]) {
						window.echartsObj['echarts' + index] = window.echarts.init(document.getElementById('echarts' + index))
					}
						this.options.series.forEach((its)=>{
							if(its.name == '外部进度条1'){
								let baseData = 80 //基础最大值
								this.controlFun(its,item.value1,item.title1,baseData)
							}
							if(its.name == '外部进度条2'){
								let baseData = 80 //基础最大值
								this.controlFun(its,item.value2,item.title2,baseData)
							}
						})
						window.echartsObj['echarts' + index].setOption(this.options)
					
				})
			},
			appendScript(val,ownerInstance){
				
				const that = this;
				if (typeof window.echarts === 'function') {
					this.initEcharts(val);
				} else {
					
					// 动态引入较大类库避免影响页面展示
					let scriptEcharts = document.querySelector('#echarts-js');
					if (!scriptEcharts) {
						const script = document.createElement('script');
						script.async='async';
						// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
						// script.src = this.baseImg + '/js/echarts-power.js';
						// #ifdef APP-PLUS
						script.src = 'static/js/echarts.min.js';
						// #endif
						// #ifdef H5
						script.src = '/static/js/echarts.min.js';
						// #endif
						// script.onload = this.initEcharts.bind(this)
						script.id = 'echarts-js'
						document.head.appendChild(script);
						script.onload = ()=>{
							
							ownerInstance.callMethod('changeEchartLoading',false)
							// 加载完毕
							
							that.initEcharts(val); //初始化echarts
						}
					}else{
						that.initEcharts(val);
					}
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	$info-label: #919297;
	.contain-main-box{
		.main-bg{
			background-color: $main-bg-bgColor;
			.main-contain{
				padding-top: 80rpx;
				.is-dot::after{
					content: ' ';
					display: block;
					width: 24rpx;
					height: 24rpx;
					// background-color: $dangerColor;
					border-radius: 50%;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%,-50%);
				}
				.alarm-dot0::after{
					background-color: $level0;
				}
				.alarm-dot1::after{
					background-color: $level1;
				}
				.alarm-dot2::after{
					background-color: $level2;
				}
				.alarm-dot3::after{
					background-color: $level3;
				}
				.alarm-dot4::after{
					background-color: $level4;
				}
				.main-card{
					width: $baseWidth;
					margin: 0 auto 30rpx auto;
					border-radius: $card-box-radius;
					background-color: rgba(255, 255, 255, 0.88);
					padding: 30rpx 22rpx;
					box-shadow: $card-box-shadow;
					position: relative;
					.echarts-loading{
						text-align: center;
						position: absolute;
						width: 100%;
						.loading-text{
							font-size: 30rpx;
							margin-top: 30rpx;
							color: #999;
						}
					}
					.circle{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						box-shadow: $card-box-shadow;
						background-color: #FFFFFF;
						position: absolute;
						top: 0;
						left: 32rpx;
						transform: translateY(-55rpx);
						z-index: 20;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						.wsd-icon{
							width: 46rpx;
							height: 79rpx;
							background-size: cover;
							background-repeat: no-repeat;
							position: relative;
						}
					}
					.top-content{
						width: 100%;
						height: 70rpx;
						position: relative;
						margin-bottom: 40rpx;
						.mess{
							width: 470rpx;
							margin-left: 192rpx;
							.top-row{
								margin-bottom: 20rpx;
								.info-label,
								.info-text {
									font-size: 28rpx;
								}
								.info-label {
									color: $info-label;
								}
								.info-text{
									color: $ky-main-color;
								}
							}
						}
					}
					.status-content{
						text-align: center;
						margin-bottom: 45rpx;
						text{
							display: block;
							font-size: 26rpx;
							&:first-child{
								color: $ky-main-color;
							}
						}
						.abnormal{
							color: $dangerColor;
							font-size: 30rpx;
							margin-top: 14rpx;
						}
					}
					.echarts-content{
						max-height: 950rpx;
						.echarts{
							width: 100%;
							height: 200rpx;
							margin-bottom: 54rpx;
						}
					}
				}
			}
		}
	}
</style>
